<template>
  <div>
    <topTitle
      :titleText="titleText"
      @gobackTriser="cancleForm"
      :back="back"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="150px"
        class="ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <table
                cellspacing="0"
                cellpadding="0"
                border="1"
                class="tableBox"
              >
                <tbody>
                  <tr>
                    <td class="leftTd">
                      <p class="index text fontColorTheme">1.</p>
                      <p class="title text fontColorTheme">理赔详情</p>
                    </td>
                    <td class="rightTd">
                      <el-form-item label="理赔原因：" prop="claimsReasonId">
                        <el-select
                          class="inputStyle"
                          v-model="formData.claimsReasonId"
                          placeholder="请选择"
                          clearable
                        >
                          <el-option
                            v-for="item in claimsArr"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="理赔金额(元)：" prop="claimsAmount">
                        <el-input
                          class="inputStyle"
                          v-model.trim="formData.claimsAmount"
                          clearable
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="联系人姓名：" prop="linkName">
                        <el-input
                          class="inputStyle"
                          v-model.trim="formData.linkName"
                          clearable
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="联系电话：" prop="linkTel">
                        <el-input
                          class="inputStyle"
                          v-model.trim="formData.linkTel"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr>
                    <td class="leftTd">
                      <p class="index text fontColorTheme">2.</p>
                      <p class="title text fontColorTheme">理赔资料</p>
                    </td>
                    <td class="rightTd lastRightTd">
                      <div class="titleBox">
                        <div
                          class="tabTitle"
                          @click="changeIndex(index)"
                          v-for="(item, index) in fileOptions"
                          :key="item.id"
                        >
                          <div
                            :class="
                              currentIndex === index
                                ? 'textBox textBoxCur'
                                : 'textBox'
                            "
                          >
                            <span class="mark" v-if="item.isUpload"
                              ><span class="right">✔</span></span
                            >
                            <span class="star nameText" v-if="item.prop"
                              >*</span
                            >
                            <span
                              :class="
                                item.prop ? 'nameText' : 'nameText noProp'
                              "
                              >{{ item.name }}</span
                            >
                            <span class="error" v-if="item.prop && item.error"
                              >请上传相应附件</span
                            >
                          </div>
                        </div>
                      </div>
                      <div class="fileBox">
                        <!-- <div class="tabFile" v-for="(item,index) in fileOptions" :key="item.id"> -->
                        <div class="fileInfo" v-show="currentIndex === 0">
                          <p style="margin-bottom: 20px">索赔通知书</p>
                          <uploadAnnex
                            @getFileList="getFileListLicense"
                            :limitationFactor="limitationFactorLicense"
                            @getFile="getFileLicense"
                            :upLoadFile="upLoadFileLicense"
                          />
                          <uploadResult
                            style="margin-top: 20px"
                            :resultList="upLoadFileLicense"
                            @callBackResult="getFileLicense"
                          />
                        </div>
                        <div class="fileInfo" v-show="currentIndex === 1">
                          <p style="margin-bottom: 20px">
                            行政处罚决定书及农民工工资拖欠明细
                          </p>
                          <uploadAnnex
                            @getFileList="getFileListLevel"
                            :limitationFactor="limitationFactorLevel"
                            @getFile="getFileLevel"
                            :upLoadFile="upLoadFileLevel"
                          />
                          <uploadResult
                            style="margin-top: 20px"
                            :resultList="upLoadFileLevel"
                            @callBackResult="getFileLevel"
                          />
                        </div>
                        <div class="fileInfo" v-show="currentIndex === 2">
                          <p style="margin-bottom: 20px">保险单复印件</p>
                          <uploadAnnex
                            @getFileList="getFileListBidding"
                            :limitationFactor="limitationFactorBidding"
                            @getFile="getFileBidding"
                            :upLoadFile="upLoadFileBidding"
                          />
                          <uploadResult
                            style="margin-top: 20px"
                            :resultList="upLoadFileBidding"
                            @callBackResult="getFileBidding"
                          />
                        </div>
                        <div class="fileInfo" v-show="currentIndex === 3">
                          <p style="margin-bottom: 20px">其他</p>
                          <uploadAnnex
                            @getFileList="getFileListOther"
                            :limitationFactor="limitationFactorOther"
                            @getFile="getFileOther"
                            :upLoadFile="upLoadFileOther"
                          />
                          <uploadResult
                            style="margin-top: 20px"
                            :resultList="upLoadFileOther"
                            @callBackResult="getFileOther"
                          />
                        </div>
                        <!-- </div> -->
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="guaranteeInfoBox">
                <div class="title">
                  <img
                    src="../../../static/img/newInsurance/bh.png"
                    alt=""
                  />保函
                </div>
                <div>
                  <p class="infoName">投保项目名称</p>
                  <p class="infoCon mB">{{ detailData.projectName }}</p>
                </div>
                <div>
                  <p class="infoName">投保企业</p>
                  <p class="infoCon mB">{{ detailData.pbName }}</p>
                </div>
                <div>
                  <p class="infoName">保险保函</p>
                  <p class="infoCon mB8">
                    保单号：<span>{{ detailData.claimsOrder || '--' }}</span>
                  </p>
                  <p class="infoCon mB8">
                    担保金额：<span
                      >￥{{ detailData.insureAmount || '--' }}</span
                    >
                  </p>
                  <p class="infoCon mB8">
                    担保期限：<span
                      >{{ detailData.startDate }}至{{
                        detailData.lastDate
                      }}</span
                    >
                  </p>
                  <p class="infoCon mB8">
                    承保机构：<span>{{ detailData.insureOrgStr || '--' }}</span>
                  </p>
                  <p class="infoCon mB8">
                    保函类型：<span>{{
                      detailData.insureTypeStr || '--'
                    }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="btnBox">
          <el-button
            type="primary"
            @click="submitForm"
            class="commonBtn confirmBtn"
            :loading="isSaveLoading"
          >
            <span>提交</span>
          </el-button>
          <el-button
            type="primary"
            @click="cancleForm"
            class="commonBtn cancleBtn"
          >
            <span>取消</span>
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addSettlementClaims',
  data() {
    var checkMoney = (rule, value, callback) => {
      var payTotal = this.formData.claimsAmount
      if (!payTotal) {
        return callback(new Error('请输入理赔金额'))
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || payTotal == 0.0 || payTotal == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          callback()
        }
      }
    }
    const checkPhoneOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        return callback(new Error('请输入联系电话'))
      }
    }
    return {
      formData: {
        claimsAmount: '',
        claimsReasonId: '', //保函类型
        linkName: '', //担保金额
        linkTel: '',
        files: {},
      },
      rules: {
        claimsAmount: {
          required: true,
          validator: checkMoney,
          trigger: 'blur',
        },
        claimsReasonId: {
          required: true,
          message: '请选择理赔原因',
          trigger: 'change',
        },
        linkName: [
          { required: true, message: '请输入联系人姓名', trigger: 'change' },
          { min: 1, max: 20, message: '请输入1-20个 字符', trigger: 'blur' },
        ],
        linkTel: {
          required: true,
          validator: checkPhoneOrTel,
          trigger: 'blur',
        },
      },
      claimsArr: [], //保函类型下拉
      back: true,
      titleText: '发起理赔',
      fileOptions: [
        {
          id: 1,
          type: 'businessLicense',
          name: '索赔通知书',
          prop: true,
          isUpload: false,
          error: false,
        },
        {
          id: 2,
          type: 'levelCertificate',
          name: '行政处罚决定书及农民工工资拖欠明细',
          prop: true,
          isUpload: false,
          error: false,
        },
        {
          id: 3,
          type: 'constructionContract',
          name: '保险单复印件',
          prop: true,
          isUpload: false,
          error: false,
        },
        {
          id: 4,
          type: 'application',
          name: '其他',
          prop: false,
          isUpload: false,
          error: false,
        },
      ],
      upLoadFileLicense: [], //索赔通知书
      oldSrcListLicense: [],
      srcListLicense: [],
      upLoadFileLevel: [], //行政处罚决定书及农民工工资拖欠明细
      oldSrcListLevel: [],
      srcListLevel: [],
      upLoadFileBidding: [], //保险单复印件
      oldSrcListBidding: [],
      srcListBidding: [],
      oldSrcListOther: [], //其他
      srcListOther: [],
      upLoadFileOther: [],
      limitationFactorLicense: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'license', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'licenseForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传索赔通知书，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      limitationFactorLevel: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'level', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'levelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传行政处罚决定书及农民工工资拖欠明细，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      limitationFactorBidding: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'bidding', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'biddingForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传保险单复印件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      limitationFactorOther: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'other', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'otherForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      currentIndex: 0,
      detailData: {},
      isSaveLoading: false, //提交loading
      type: '',
      id: '',
    }
  },
  created() {
    this.type = this.$route.query.type
    this.id = this.$route.query.id
    if (this.type && this.type == 'edit') {
      this.titleText = '修改理赔资料'
      this.getDetail()
    } else {
      this.titleText = '发起理赔'
      this.projectDetail() //获取详情
    }
    this.getTypeList()
  },
  methods: {
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/depositInsClaims/expand/detail',
        data: {
          id: this.$route.query.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.formData = response.data.result
            this.detailData = response.data.result
            this.upLoadFileLicense = this.formData.claimNoticesFileList
            this.upLoadFileLevel = this.formData.xzAndSalaryFileList
            this.upLoadFileBidding = this.formData.insuranceFileList
            this.upLoadFileOther =
              this.formData.otherFileList == null
                ? []
                : this.formData.otherFileList
            this.getFileLicense(this.upLoadFileLicense)
            this.getFileLevel(this.upLoadFileLevel)
            this.getFileBidding(this.upLoadFileBidding)
            this.getFileOther(this.upLoadFileOther)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    projectDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/depositInsClaims/expand/selectInsInsure',
        data: {
          projectId: this.$route.query.projectId,
          insureId: this.$route.query.insureId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.detailData = res.data.result
          } else {
            this.$message({
              type: 'error',
              message: res.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message.error('获取数据失败')
        })
    },
    getTypeList() {
      this.axios({
        method: 'post',
        data: { type: 'CLAIMS_REASON' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.claimsArr = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    changeIndex(index) {
      this.currentIndex = index
    },
    changeUpload(status, index) {
      this.fileOptions[index].isUpload = status
      this.fileOptions[index].prop && (this.fileOptions[index].error = !status)
    },
    // 索赔通知书
    getFileListLicense(val) {
      this.oldSrcListLicense.push(val)
      this.srcListLicense.push(val)
    },
    getFileLicense(val) {
      this.upLoadFileLicense = val
      if (val && val.length) {
        this.changeUpload(true, 0)
      } else {
        this.changeUpload(false, 0)
      }
    },
    // 行政处罚决定书及农民工工资拖欠明细
    getFileListLevel(val) {
      this.oldSrcListLevel.push(val)
      this.srcListLevel.push(val)
    },
    getFileLevel(val) {
      this.upLoadFileLevel = val
      if (val && val.length) {
        this.changeUpload(true, 1)
      } else {
        this.changeUpload(false, 1)
      }
    },
    // 保险单复印件
    getFileListBidding(val) {
      this.oldSrcListBidding.push(val)
      this.srcListBidding.push(val)
    },
    getFileBidding(val) {
      this.upLoadFileBidding = val
      if (val && val.length) {
        this.changeUpload(true, 2)
      } else {
        this.changeUpload(false, 2)
      }
    },
    //其他
    getFileListOther(val) {
      this.oldSrcListOther.push(val)
      this.srcListOther.push(val)
    },
    getFileOther(val) {
      this.upLoadFileOther = val
      if (val && val.length) {
        this.changeUpload(true, 3)
      } else {
        this.changeUpload(false, 3)
      }
    },
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.addClaims()
        } else {
          this.fileOptions.forEach((v) => {
            if (v.prop && !v.isUpload) {
              v.error = true
            }
          })
          return false
        }
      })
    },
    addClaims() {
      let flag = true
      this.fileOptions.forEach((v) => {
        if (v.prop && !v.isUpload) {
          flag = false
          v.error = true
        }
      })
      if (flag) {
        let newurl = ''
        let newdata = {}
        this.formData.files = JSON.stringify({
          claimNoticesFileList: this.upLoadFileLicense,
          xzAndSalaryFileList: this.upLoadFileLevel,
          insuranceFileList: this.upLoadFileBidding,
          otherFileList: this.upLoadFileOther ? this.upLoadFileOther : [],
        })
        if (this.type && this.type == 'edit') {
          newurl = 'api-d/depositInsClaims/expand/modify'
          newdata = {
            id: this.id,
            claimsReasonId: this.formData.claimsReasonId,
            claimsAmount: this.formData.claimsAmount,
            linkName: this.formData.linkName,
            linkTel: this.formData.linkTel,
            files: this.formData.files,
          }
        } else {
          this.formData.projectId = this.$route.query.projectId
          this.formData.insureOrder = this.$route.query.insureId
          newurl = 'api-d/depositInsClaims/expand/add'
          newdata = this.formData
        }

        this.axios({
          method: 'post',
          url: newurl,
          data: newdata,
        })
          .then((res) => {
            if (!res.data.hasError) {
              var id
              if (this.type && this.type == 'edit') {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                })
                id = this.id
              } else {
                this.$message({
                  message: '添加成功',
                  type: 'success',
                })
                id = res.data.msg
              }
              this.$router.push({
                path: '/home/newInsurance/claimsDetail',
                name: 'claimsDetail',
                query: {
                  id: id,
                },
              })
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/newInsurance/insuranceOrder',
                newUrl: this.$router.currentRoute.fullPath,
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.errorMsg,
              })
            }
            this.isSaveLoading = false
          })
          .catch((error) => {
            this.$message.error('保存失败')
            this.isSaveLoading = false
          })
      } else {
        this.isSaveLoading = false
        return false
      }
    },
    cancleForm() {
      if (this.type && this.type == 'edit') {
        if (this.$route.query.mark && this.$route.query.mark == 'againEdit') {
          this.$router.push({
            path: '/home/newInsurance/claimsDetail',
            name: 'claimsDetail',
            query: {
              id: this.id,
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/newInsurance/insuranceOrder',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          this.$router.push({
            path: '/home/newInsurance/insuranceOrder',
            name: 'insuranceOrder',
            query: {
              activeName: 'second',
            },
          })
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/newInsurance/insuranceOrder',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      } else {
        this.$router.push({
          path: '/home/newInsurance/insuranceOrderProgress',
          name: 'insuranceOrderProgress',
          query: {
            id: this.$route.query.id,
            status: this.$route.query.status,
            step: '2',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/newInsurance/insuranceOrder',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  // width: 100%;
  // height: 100%;
  // margin-top: 27px;
  padding: 24px;
  .tableBox {
    width: 100%;
    border-color: #dcdfe6;
    border-collapse: collapse;
    .leftTd {
      width: 145px;
      background: #f8f9fb;
      padding: 20px 32px;
      .text {
        color: #265faa;
        font-weight: 500;
      }
      .index {
        font-size: 40px;
        line-height: 50px;
      }
      .title {
        font-size: 20px;
        margin-top: 10px;
      }
      .desc {
        font-size: 14px;
      }
    }
    .rightTd {
      width: calc(100% - 160px);
      padding: 20px 15px;
      .inputStyle {
        width: 320px;
      }
      .inputMoneyStyle {
        width: 126px;
      }
      .inputAddressStyle {
        // width: 550px;
      }
      .desc {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
    }
    .lastRightTd {
      height: 310px;
      padding: 0;
      // font-size: 0;
      .titleBox {
        width: 168px;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        border-bottom: none;
        padding: 0;
        margin-bottom: 0;
        .tabTitle {
          width: 168px;
          height: calc(100% / 4);
          .textBox {
            width: 100%;
            border: 1px solid #dcdfe6;
            border-left: none;
            border-top: none;
            display: table;
            height: 100%;
            position: relative;
            .mark {
              border-left: 10px solid #46a3ff;
              border-top: 10px solid #46a3ff;
              border-right: 10px solid transparent;
              border-bottom: 10px solid transparent;
              position: absolute;
              top: 0;
              left: 0;
              .right {
                font-size: 12px;
                color: #fff;
                position: absolute;
                top: -10px;
                left: -10px;
                transform: rotateZ(10deg);
              }
            }
            .nameText {
              font-size: 14px;
              color: #333333;
              font-weight: 400;
              vertical-align: middle;
              display: table-cell;
              padding-left: 5px;
            }
            .noProp {
              padding-left: 42px;
            }
            .star {
              text-align: right;
              font-size: 16px;
              color: #d81e06 !important;
              padding-left: 20px;
            }
            .error {
              position: absolute;
              left: 48%;
              transform: translateX(-50%);
              top: 70%;
              font-size: 12px;
              color: #f56c6c;
            }
          }
          .textBoxCur {
            border-right: none;
            .nameText {
              color: #48a6ff;
            }
          }
        }
      }
      .fileBox {
        width: calc(100% - 175px);
        height: 100%;
        display: inline-block;
        padding: 24px;
        .fileInfo {
          p {
            font-size: 16px;
            color: #333333;
            font-weight: 700;
          }
        }
      }
    }
  }
  table,
  tr,
  td,
  th,
  thead,
  tbody {
    border: 1px solid #dcdfe6;
  }
  .btnBox {
    height: 100px;
    text-align: center;
    .commonBtn {
      width: 136px;
      height: 36px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .cancleBtn {
      border-color: #999 !important;
      background-color: #fff !important;
      color: #666 !important;
    }
  }
  .guaranteeInfoBox {
    border: 1px solid #dcdfe6;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 8px;
    .title {
      font-size: 18px;
      color: #242c3b;
      font-weight: 700;
      margin-bottom: 28px;
      img {
        vertical-align: middle;
        margin-right: 8px;
        margin-top: -3px;
      }
    }
    .infoName {
      font-size: 14px;
      color: #333;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .infoCon {
      font-size: 14px;
      color: #333;
      font-weight: 400;
    }
    .mB {
      margin-bottom: 28px;
    }
    .mB8 {
      margin-bottom: 8px;
    }
  }
}
</style>
